<template>
	<view class="container">
		<!-- 搜索 -->
		<view class="search">
			<u-search @search="onSearch" @custom="onSearch" v-model="keywords" placeholder="请输入创作者口令进行搜索"></u-search>
		</view>
		<!-- 轮播 -->
		<view class="banner">
			<u-swiper @click="onClickBanner" height="160" :indicator="true" keyName="file_path" :list="banner">
			</u-swiper>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<u-notice-bar bgColor="#ffffff" color="#82848a" :text="store.notice"></u-notice-bar>
		</view>
		<!-- 金刚区 -->
		<view class="grid">
			<u-grid :border="false" col="4">
				<block v-for="(item,index) in grid">
					<u-grid-item @click="onJump(item)">
						<view class="icon">
							<u-icon :name="item.file_path" :size="36"></u-icon>
						</view>
						<text class="grid-text">{{ item.title }}</text>
					</u-grid-item>
				</block>
			</u-grid>
		</view>
		<block v-if="store.index_style == 10">
			<!-- 免费专区 -->
			<view class="panel" v-if="free.length > 0">
				<view class="head">
					<view class="left">
						<view class="icon">
							<u--image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16709144987982626732.png"
								width="33rpx" height="29rpx" mode="heightFix"></u--image>
						</view>
						<view class="title">免费封面</view>
					</view>
					<view class="right" @click="onDayTask">
						<view class="title">每日任务</view>
						<view class="icon">
							<u--image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16709144988019427324.png"
								width="33rpx" height="29rpx" mode="heightFix"></u--image>
						</view>
					</view>
				</view>
				<!-- 推荐红包列表 -->
				<u-scroll-list>
					<view class="cover">
						<view class="item" @click="onCover(item.cover_id)" v-for="(item,index) in free" :key="index">
							<view class="image">
								<u--image :src="item.image.file_path" width="240rpx" height="280rpx" mode="aspectFill">
								</u--image>
							</view>
							<view class="title">{{ item.name }}</view>
							<view class="bottom">
								<view class="left">
									<view class="icon">
										<u--image
											src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16709144995558092144.png"
											width="33rpx" height="29rpx" mode="heightFix"></u--image>
									</view>
									<view class="text">{{ item.coin }}</view>
								</view>
								<view class="btn" v-if="item.type == 10">
									<u-button color="#dd6161" size="small" shape="circle" text="领取"></u-button>
								</view>
								<view class="btn" v-if="item.type == 20">
									<u-button color="#dd6161" size="small" shape="circle" text="预约"></u-button>
								</view>
								<view class="btn" v-if="item.type == 30">
									<u-button color="#dd6161" size="small" shape="circle" text="领取"></u-button>
								</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- 红包封面列表 -->
			<view class="package">
				<u-sticky offset-top="5">
					<view class="tabs">
						<!-- <u-subsection bgColor="#fff" mode="subsection" activeColor="#dd6161" :list="tabs" :current="0">
				</u-subsection> -->
						<u-tabs @click="onTabs" lineColor="#dd6161" :list="tabs"></u-tabs>
					</view>
				</u-sticky>
				<view class="cover" v-if="cover.length > 0">
					<view class="item" @click="onCover(item.cover_id)" v-for="(item,index) in cover" :key="index">
						<view class="image">
							<u--image :src="item.image.file_path" width="100%" radius="5" height="460rpx"
								mode="aspectFill">
							</u--image>
						</view>
						<view class="title">{{ item.name }}</view>
						<view class="bottom">
							<view class="left">
								<view class="icon">
									<u--image
										src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16709144995558092144.png"
										width="33rpx" height="29rpx" mode="heightFix"></u--image>
								</view>
								<view class="text">{{ item.coin }}</view>
							</view>
							<view class="btn" v-if="item.type == 10">
								<u-button color="#dd6161" size="small" shape="circle" text="立即领取"></u-button>
							</view>
							<view class="btn" v-if="item.type == 20">
								<u-button color="#dd6161" size="small" shape="circle" text="立即预约"></u-button>
							</view>
							<view class="btn" v-if="item.type == 30">
								<u-button color="#dd6161" size="small" shape="circle" text="免费领取"></u-button>
							</view>
						</view>
					</view>
				</view>
				<view class="empty" v-else>
					<u-empty mode="data" text="暂无更多封面~!" icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="package">
				<view class="header">
					<view class="title">AI绘画展厅</view>
				</view>
				<view class="cover">
					<view class="item" @click="onDraw(item.task_id)" v-for="(item,index) in draw" :key="index">
						<view class="image">
							<u--image :src="item.draw_image_url" width="100%" radius="5" height="460rpx"
								mode="aspectFill">
							</u--image>
						</view>
						<view class="title" v-if="0">{{ item.draw_text }}</view>
						<view class="style">
							<u-tag :text="item.draw_style" size="mini" type="error"></u-tag>
						</view>
						<view class="bottom">
							<view class="date">{{ item.create_time }}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		lists,
		category
	} from '@/api/cover.js';
	import {
		config,
		search,
		jump
	} from '@/api/system.js';
	import {
		insert
	} from '@/utils/ad.js';
	import {
		detail
	} from '@/api/user.js';
	import {
		hall
	} from '@/api/draw.js';
	export default {
		data() {
			return {
				keywords: '',
				store: {},
				grid: [],
				category_id: '',
				free: [],
				cover: [],
				tabs: [],
				is_reach: false,
				page: 1,
				share: {},
				notice: 'AI红包封面专业版上线，聚合多种新年玩法，独立部署，无限多开！',
				banner: [],
				userInfo: {},
				draw: [],
				showBar: false
			};
		},
		onLoad() {
			this.getCategory()
			this.getFreeCover()
			this.getStore()
			this.getBanner()
			this.getGrid()
			this.getSpool()
			this.getShare()
			this.getUser()
		},
		onShareTimeline() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.user_id) {
				referee_id = _this.userInfo.user_id
			}
			return {
				imageUrl: _this.share.cover,
				title: "@" + _this.share.title,
				path: '/pages/main/index/index?referee_id=' + referee_id
			}
		},
		onShareAppMessage() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.user_id) {
				referee_id = _this.userInfo.user_id
			}
			return {
				imageUrl: _this.share.cover,
				title: "@" + _this.share.title,
				desc: _this.share.desc,
				path: '/pages/main/index/index?referee_id=' + referee_id
			}
		},
		onReachBottom() {
			let _this = this
			_this.is_reach = true
			_this.page = _this.page + 1
			if (_this.store.index_style == 10) {
				_this.getCover()
			} else {
				_this.gethall()
			}
		},
		methods: {
			onSearch(text) {
				search({
					text: text
				}).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages/author/user/index?author_id=' + res.data.config.author_id
						})
					}
				}).catch(err => {

				})
			},
			onDraw(task_id) {
				uni.navigateTo({
					url: '/pages/draw/detail/index?task_id=' + task_id
				})
			},
			gethall() {
				let _this = this
				hall({
					page: _this.page
				}).then(res => {
					if (_this.is_reach) {
						this.draw = [...this.draw, ...res.data.draw.data]
					} else {
						this.draw = res.data.draw.data
					}
					_this.is_reach = false
				}).catch(err => {

				})
			},
			getUser() {
				detail({}).then(res => {
					this.userInfo = res.data.userInfo
				}).catch(err => {

				})
			},
			getShare() {
				config({
					key: 'share'
				}).then(res => {
					this.share = res.data.config
				}).catch(err => {

				})
			},
			getSpool() {
				let _this = this;
				config({
					key: 'spool'
				}).then(res => {
					_this.spool = res.data.config
					if (_this.spool.insert.status == 10) {
						insert.load(_this.spool.insert.id)
						insert.show()
					}
				}).catch(err => {

				})
			},
			onDayTask() {
				uni.reLaunch({
					url: '/pages/main/task/index'
				})
			},
			onClickBanner(index) {
				this.onJump(this.banner[index])
			},
			onJump(item) {
				if (item.type == 10) {
					uni.reLaunch({
						url: item.url
					})
					return false;
				}
				if (item.type == 20) {
					uni.navigateTo({
						url: '/pages/main/webview/index?url=' + item.url
					});
					return false;
				}
				if (item.type == 30) {
					uni.navigateToMiniProgram({
						appId: item.app_id,
						path: item.url,
						success(res) {
							// 打开成功
						}
					});
					return false;
				}
				if (item.type == 40) {
					uni.showToast({
						title: '暂不支持的类型'
					})
					return false;
				}
			},
			getBanner() {
				jump({
					local: 10
				}).then(res => {
					this.banner = res.data.jump
				}).catch(err => {

				})
			},
			getGrid() {
				jump({
					local: 20
				}).then(res => {
					this.grid = res.data.jump
				}).catch(err => {

				})
			},
			getStore() {
				config({
					key: 'store'
				}).then(res => {
					this.store = res.data.config
					if (this.store.index_style == 10) {
						this.getCover()
					} else {
						this.gethall()
					}
				}).catch(err => {

				})
			},
			onTabs(e) {
				this.category_id = e.category_id
				this.page = 1;
				this.getCover()
			},
			getFreeCover() {
				lists({
					type: 30
				}).then(res => {
					this.free = res.data.cover.data
				}).catch(err => {

				})
			},
			getCover() {
				let _this = this
				lists({
					category_id: this.category_id,
					page: _this.page
				}).then(res => {
					if (_this.is_reach) {
						this.cover = [...this.cover, ...res.data.cover.data]
					} else {
						this.cover = res.data.cover.data
					}
					_this.is_reach = false
				}).catch(err => {

				})
			},
			getCategory() {
				category({}).then(res => {
					let tabs = [{
						name: '全部',
						category_id: ''
					}]
					let category = res.data.category
					for (let i in category) {
						let arr = {}
						arr.name = category[i].name
						arr.category_id = category[i].category_id
						tabs.push(arr)
					}
					this.tabs = tabs
				}).catch(err => {

				})
			},
			onCover(cover_id) {
				uni.navigateTo({
					url: '/pages/cover/detail/index?cover_id=' + cover_id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f7f9;
		font-size: 28rpx;
		padding-bottom: 120rpx;
	}

	.package {
		width: 92%;
		margin: 15rpx auto;

		.tabs {
			background-color: #fff;
			padding-bottom: 15rpx;
			margin-bottom: 15rpx;
		}

		.header {
			background-color: #fff;
			padding: 15rpx;
			border-radius: 5rpx;
			margin-bottom: 15rpx;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #303133;
			}
		}

		.cover {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				width: 330rpx;
				box-shadow: 5rpx 5rpx 10rpx #eee;
				margin-bottom: 10rpx;
				border-radius: 15rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;

				.image {
					width: 100%;
				}

				.title {
					margin: 15rpx 0rpx;
				}

				.style {
					color: #fa3534;
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}

				.bottom {
					width: 90%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin: 15rpx;
					margin-left: 0rpx;

					.left {
						display: flex;
						flex-direction: row;
						align-items: center;
					}
				}
			}
		}
	}

	.panel {
		width: 84%;
		margin: 15rpx auto;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding-bottom: 0rpx;

		.u-scroll-list {
			.u-scroll-list__indicator {
				margin-top: 10rpx;
			}
		}

		.cover {
			display: flex;
			flex-direction: row;

			.item {
				width: 240rpx;
				box-shadow: 5rpx 5rpx 10rpx #eee;
				margin-bottom: 10rpx;
				border-radius: 15rpx;
				overflow: hidden;
				margin-right: 30rpx;

				.title {
					margin: 15rpx 0rpx;
				}

				.bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin: 15rpx;
					margin-left: 0rpx;

					.left {
						display: flex;
						flex-direction: row;
						align-items: center;
					}
				}
			}
		}

		.head {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					margin-right: 15rpx;
				}
			}
		}
	}

	.search {
		width: 89%;
		margin: 15rpx auto;
		background-color: #fff;
		padding: 15rpx;
		border-radius: 10rpx;
	}

	.banner {
		width: 92%;
		margin: 0 auto;
	}

	.notice {
		width: 92%;
		margin: 15rpx auto;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.grid {
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		padding: 30rpx 0rpx;
		border-radius: 10rpx;
		overflow: hidden;
		padding-top: 0rpx;

		.icon {
			margin-top: 30rpx;
		}

		.grid-text {
			margin-top: 15rpx;
		}
	}
</style>
